<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg no-smil svgclippaths">

	<head>
		<meta charset="UTF-8">
		<title>交付订单明细</title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" href="css/goods.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
	</head>

	<body class="fixed-left"><iframe name="CalFrame" width="144" height="192" id="CalFrame" src="/css/calendar.htm" style="border: 0px; border-image: none; display: none; position: absolute; z-index: 100;"></iframe>
		<title>XToolsCRM - easy to Power</title>

		<div class="enlarged forced" id="wrapper">

			<!--UTF8-->
			<div id="del" style="position:absolute; visibility:hidden;&#9;left:0;&#9;top:0; width:0;&#9;height:0; z-index:100; background-color:#D4D0C8; "></div>
			<!-- basewin iframe -->

			<div tabindex="-1" class="modal fade" id="popshow_container" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel" style="display: none;">
				<div class="modal-dialog modal-xg">
					<div class="modal-content" id="popshow_container_content" style="padding: 0px 0px; border-width: 0px; height: 0px;">
						<div class="modal-body " id="popshow" style="display: none;">
							<div id="popshowcont">
								<div id="gedit"></div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div tabindex="-1" class="modal fade" id="popact" role="dialog" aria-hidden="true" aria-labelledby="myModalLabel" style="display: none;">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
							<h4 class="modal-title">操作</h4>
						</div>
						<div class="modal-body">

						</div>
						<div class="modal-footer">
							<div id="editsublayer" style="position:absolute; visibility:hidden;&#9;left:0;&#9;top:0; width:0;&#9;height:0;">
								<iframe name="popact_iframe" id="popact_iframe" src="/a.html" scrolling="no" style="width: 0; height: 0; border: 0;"></iframe></div>
							<!-- <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary waves-effect waves-light">保存</button> -->
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
			<!-- /.modal -->
			<!-- 页面头部结束 -->

			<!-- ============================================================== -->
			<!-- 右侧主体内容开始-->
			<!-- ============================================================== -->
			<div class="content-page crm">
				<div class="content">
					<div class="container-fluid" style="min-height: 900px;">
						<div class="row">

							<div class="col-sm-12">

								<div id="goodsmark" style="z-index:0">
									<ul class="nav nav-default nav-tabs ">

										<li class="active">
											<a aria-expanded="true" onclick="qlist_argv_bwhere='';qlist_argv_page=1;qlist_load();goodsmark_argv_tt=0;goodsmark_load();" href="#" data-toggle="tab">
												全部
											</a>
										</li>
									</ul>
									<!--UTF8-->
								</div>
								
							<!--这里是总的div放所有内容的-->
							<div class="allBaBox">
								<el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm">
								<!----------------筛选、查询input代码开始-------------------->
								<div class="m-t-20">
									<div id="search" style="z-index:0">
										<div id="editsublayer" style="position:absolute; visibility:hidden;&#9;left:0;&#9;top:0; width:0;&#9;height:0; z-index:100; background-color:#D4D0C8; ">
											<iframe name="qssub" src="/a.html" style="width: 0; height: 0; border: 0;"></iframe>
										</div>
										
										
<!--头部搜索栏-->
										<form name="qsearch" class="form-inline" role="form" onsubmit="hideDiv(); return true;" action="/system/qssub.xt" method="POST" target="qssub" novalidate="">

											<div class="form-group ">
												<label class="control-label col-sm-2 m-t-10"><i class="fa fa-filter m-r-5"></i></label>
												<div class="col-sm-10">
													<div class="btn-group bootstrap-select form-control show-tick">
													<div class="box">
														<el-select v-model="ruleForm.selects" slot="prepend"
															clearable placeholder="全部数据"
															style="background: #ccc;width: 113px;"> 
															<el-option
															label="交付完" value="2997"></el-option> 
															<el-option
															label="未交付" value="2998"></el-option>  </el-select>


													</div>
                     	
													</div>
												</div>

											</div>
											<div style="position:absolute; visibility:hidden;left:0;top:0; width:0;height:0; z-index:100; background-color:#D4D0C8; ">
												<textarea name="ids" rows="2" cols="20"></textarea>
											</div>
											<div class="form-group">
												   <!--搜索栏那一块-->
											<div class="box2"
												style="width: 300px; height: 40px; margin-top: 5px;">
												<el-input placeholder="请输入内容" v-model="ruleForm.selectinput">

												<el-button slot="prepend" icon="el-icon-search"
													@click="submitForm('ruleForm')"></el-button></el-input>

											</div>
   </div>

										</form>
									</div>
								</div>
								<!----------------列表-------------------->

								<div id="qlist" style="z-index:0">
									<div id="editqlist" style="position:absolute; display:none;&#9;left:0;&#9;top:0; width:0;&#9;height:0; z-index:100; background-color:#D4D0C8; "><iframe name="editsubqlist" width="1" height="1" src="/a.html" frameborder="0" scrolling="no"></iframe></div>
									<form name="formedit_qlist" action="/system/alldel.xt" method="POST" target="editsubqlist" novalidate=""><input name="mdb" type="hidden" value="59da8bd04473ac6711d74cd91dbe903d"><input name="db" type="hidden" value="goods"><input name="cn" type="hidden" value="qlist">
										<div class="row m-t-15 f-s-12" style="height: 35px;">
											<div class="col-sm-6">
												<span set-lan="html:交付计划/订单明细">交付计划/订单明细</span>
												<small class="text-muted font-13">共{{ruleForm.totalCount}}条</small>

											</div>
											<div class="col-sm-6 text-right">
												<!-- <div id="app">
													<template>
														<el-button :plain="true" @click="openHTML">新建</el-button>
													</template>
													<iframe border="2px red solid"></iframe>
												</div> -->
												
												<!--  <button class="btn btn-white waves-effect waves-light" onclick='qlist_click_insert(0,"3de197");return false;'><i class="fa fa-plus-circle m-r-5"></i>新建</button>&nbsp;<button class="btn btn-white btn-custom f-s-12" id="btn_list_fields"><i class="fa fa-th"></i></button>
   --></div>
										</div>

										<div class="tab-content p-0">
											<div class="bootstrap-table m-t-10">
												<div class="fixed-table-container overflow-x-auto">
													<table class="table table-bordered table-hover table-z" id="qlist_table">
														<thead>
															<tr>
																

																<th class="th-inner">
																	<p>
																		<a class="na" href="JavaScript:qlist_argv_orderf='id'; qlist_argv_orderv=0;qlist_load();" set-lan="html:ID">ID</a>
																	</p>
																</th>
																<th class="th-inner">
																	<p align="left">
																		<a class="na" href="JavaScript:qlist_argv_orderf='name'; qlist_argv_orderv=0;qlist_load();" set-lan="html:产品名称">产品名称</a>
																	</p>
																</th>
																<th class="th-inner">
																	<p align="right" set-lan="html:订单数量">订单数量</p>
																</th>
																<th class="th-inner">
																	<p align="right">
																		<a class="na" href="JavaScript:qlist_argv_orderf='deli_sum'; qlist_argv_orderv=0;qlist_load();" set-lan="html:已交付">已交付</a>
																	</p>
																</th>
																<th class="th-inner">
																	<p align="right">
																		<a class="na" href="JavaScript:qlist_argv_orderf='un_price'; qlist_argv_orderv=0;qlist_load();" set-lan="html:单价">单价</a>
																	</p>
																</th>
																<th class="th-inner">
																	<p align="right" set-lan="html:金额">金额</p>
																</th>
																<th class="th-inner">
																	<p>
																		<a class="na" href="JavaScript:qlist_argv_orderf='date'; qlist_argv_orderv=0;qlist_load();" set-lan="html:计划交付日期">计划交付日期</a>
																	</p>
																</th>
																<th class="th-inner">
																	<p align="left">
																		<a class="na" href="JavaScript:qlist_argv_orderf='principal'; qlist_argv_orderv=0;qlist_load();" set-lan="html:所有者">所有者</a>
																	</p>
																</th>
																<th class="th-inner">
																	<p align="left">
																		<a class="na" href="JavaScript:qlist_argv_orderf='cu_id'; qlist_argv_orderv=0;qlist_load();" set-lan="html:客户">客户</a>
																	</p>
																</th>
																<th class="th-inner">
																	<p align="left">
																		<a class="na" href="JavaScript:qlist_argv_orderf='co_id'; qlist_argv_orderv=0;qlist_load();" set-lan="html:合同/订单">合同/订单</a>
																	</p>
																</th>
																<th class="th-inner">&nbsp;
																</th>
																
															</tr>
														</thead>
														<tbody class="bg-white">

															<tr v-for="(colle,i) in tableData">
																
																<td>
																	<p>{{i+1}}<!-- {{colle.o_id}} --></p>
																</td>
																<td>
																	<p align="left">
																		<a id="qlist_F406" onclick=" reportMove(this) ;" href='JavaScript:qlist_click_todetail("406","700e89");'><i class="fa fa-arrow-circle-right text-blue m-r-5"></i>{{colle.goo_name}}</a>
																		<a href="javascript:vopen('/xcrm/market/product/detail.xt?id=103','product103',999,600);"><i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i></a>
																	</p>
																</td>
																<td>
																	<p align="right">{{colle.zongd}}</p>
																</td>
																<td>
																	<p align="right">{{colle.od_yesnum}}</p>
																</td>
																<td>
																	<p align="right"><span style="white-space:nowrap"><span style="font-size:9pt;font-weight:normal;">￥</span>{{colle.od_price}}</span>
																	</p>
																</td>
																<td>
																	<p align="right"><span style="white-space:nowrap"><span style="font-size:9pt;font-weight:normal;">￥</span>{{colle.od_sumprice}}</span>
																	</p>
																</td>
																<td>
																	<p>{{colle.o_date}}</p>
																</td>
																<td>
																	<p align="left">{{colle.use_name}}</p>
																</td>
																<td>
																	<p align="left"><span style="font-weight:normal;color:#9e9e9e"></span>{{colle.cus_name}}
																		<a ><i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i></a><span style="font-weight:normal;color:#9e9e9e"></span></p>
																</td>
																<td>
																	<p align="left"><a :href="getOrderHref(colle.od_id)"><span style="font-weight:normal;color:#9e9e9e">〖</span>{{colle.otitle}}
																		<i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i><span style="font-weight:normal;color:#9e9e9e">〗</span></a><i title="" class="f-s-16 fa fa-check text-custom" data-original-title="" data-toggle="tooltip" data-placement="bottom" data-title="结束"></i></p>
																</td>
																<td nowrap="">&nbsp;
																</td>
																
															</tr>
															
															
													<tr>
																<td>
																	&nbsp;</td>
																<td nowrap="">
																	<font color="#41a5ff">∑本页</font>
																</td>
																<td nowrap="">&nbsp;</td>
																<td nowrap="">
																	<p align="right">
																		<font color="#41a5ff">{{allMoney}}</font>
																	</p>
																</td>
																<td nowrap="">
																	<p align="right">
																		<font color="#41a5ff">{{allhuikuan}}</font>
																	</p>
																</td>
																<td nowrap="">&nbsp;</td>
																<td nowrap="">
																	<p align="right">
																		<font color="#41a5ff"><span style="white-space:nowrap"><span style="font-size:9pt;font-weight:normal;">￥</span>{{allyeshuikuan}}</span>
																		</font>
																	</p>
																</td>
																<td nowrap="">&nbsp;</td>
																<td nowrap="">&nbsp;</td>
																<td nowrap="">&nbsp;</td>
																<td nowrap="">&nbsp;
																</td>
																
															</tr>
														</tbody>
													</table>
												</div>
											</div>
											<div class="row m-t-10">
												<div class="col-sm-3">
													
												</div>
												<div class="col-sm-7 text-center">
												<div class="block">
														<el-pagination @size-change="handleSizeChange"
															@current-change="handleCurrentChange"
															:current-page="ruleForm.currentPage"
															:page-size="ruleForm.pagesize"
															layout="total, prev, pager, next, jumper"
															:total="ruleForm.totalCount"> </el-pagination>
													</div>
												</div>
												
											</div>
										</div>

										<!--UTF8-->
									</form>
									<form name="outexcel" action="/sys/plist/listout.xt" method="POST" novalidate=""><input name="dt" type="hidden" value="goods"><input name="w" type="hidden" value="a5gATPnFGbmRGI"><input name="dcr" type="hidden" value="73dc3"></form>
									<form name="actname1" action="/sys/cupool/listout.xt" method="POST" novalidate=""><input name="dt" type="hidden" value="goods"><input name="w" type="hidden" value="a5gATPnFGbmRGI"><input name="dcr" type="hidden" value="73dc3"><input name="modparam" type="hidden" value=""></form>
								</div>
								<!----------------统计-------------------->

<el-form>
</div>

	<script type="text/javascript">
							
					
							 
									var vm = new Vue({
										el: ".allBaBox",
										data: {
											allMoney:"",
											allhuikuan:"",
											allyeshuikuan:"",
											iframdilog:"",
											dialogVisible: false,
											select: "全部数据",
											options: [{
												value: '3001',
												label: '产品销售'
											}, {
												value: '3002',
												label: '服务'
											}, {
												value: '3003',
												label: '业务合作'
											}, {
												value: '3004',
												label: '代理分销'
											}],
											centerDialogVisible: false,
											centerDialogVisible2:false,
											//表格当前页数据
			               					tableData: [],
											ruleForm: {
											//下拉条件按钮
											selects: "全部数据",
												//搜索框
												selectinput: '',
												//下拉条件按钮
												selectend: '',
											    //默认每页数据量
				              				    pagesize:10,
				              				    //当前页码
				               				    currentPage: 1,
				               				    //默认数据总数
				              					totalCount: ''
						      				    },deletids:""
						      				   
										},
										methods: {
											
											handleCommand(command) {
												this.$message('click on item ' + command);
												this.ruleForm.selects = command;
											},
											//从服务器读取数据
							                loadData: function(pageNum, pageSize){  
							                	
							                	var iosnn=this;
							                	//post提交数据
												axios.post("/onSale/goodse2",
													//参数转换
													Qs.stringify(this.ruleForm, {
														arrayFormat: 'brackets'
													})		
												).then(function(v) {
													if (v.data.list!=null) {
														iosnn.tableData = v.data.list;
														iosnn.ruleForm.totalCount = v.data.total;
														var strs=0;
														var huikuan=0.0;
														var yeshuikuan=0.0;
														iosnn.tableData.forEach(v => {
															 strs +=v.od_nonum;
															 if (v.od_yesnum!=null) {
																 huikuan+=v.od_yesnum;
															}if (v.od_sumprice!=null) {
																yeshuikuan+=v.od_sumprice;
															}
															
															 
														})
														iosnn.allMoney=strs;
														iosnn.allhuikuan=huikuan;
														iosnn.allyeshuikuan=yeshuikuan; 
														console.info(v.data); 
													}
												}).catch(function(e) {
													alert("出错了"+e);
												});
							                },
							                handleSizeChange(val) {
												console.log('每页 ${val} 条');
												this.ruleForm.pagesize = val;
										        console.log( this.ruleForm.pagesize+'条');
										        //this.ruleFormloadData();
											},
											handleCurrentChange(val) {
												this.ruleForm.currentPage = val;
											    console.log(this.ruleForm.currentPage+'当前');
											    this.loadData();
											},
											submitForm(formName) {
												//验证方法
												this.$refs[formName].validate((valid) => {
													if(valid) {
														//alert("aa");
														this.loadData(this.currentPage, this.pagesize);
													} else {
														//alert("aa");
														console.log('error submit!!');
														return false;
													}
												});
											},getOrderHref(val){
												//alert(val);
												return 'shozhongordertwo2?oid='+val;
											}
										      
										},
										mounted() {
											var iosnn=this;
											//post提交数据
											axios.post("/onSale/goodse",
												//参数转换
												Qs.stringify(this.ruleForm, {
													arrayFormat: 'brackets'
												})		
											).then(function(v) {
												if (v.data.list!=null) {
													iosnn.tableData = v.data.list;
													iosnn.ruleForm.totalCount = v.data.total;
													var strs=0;
													var huikuan=0.0;
													var yeshuikuan=0.0;
													iosnn.tableData.forEach(v => {
														 strs +=v.od_nonum;
														 if (v.od_yesnum!=null) {
															 huikuan+=v.od_yesnum;
														}if (v.od_sumprice!=null) {
															yeshuikuan+=v.od_sumprice;
														}
														
														 
													})
													iosnn.allMoney=strs;
													iosnn.allhuikuan=huikuan;
													iosnn.allyeshuikuan=yeshuikuan; 
													console.info(v.data); 
												}
												

											}).catch(function(e) {
												alert("出错了"+e);
											});
											

										}
										
									})
								</script>

					


							</div>
						</div>

					</div>

				</div>

			</div>

			<!-- ============================================================== -->
			<!-- 右侧主体内容结束 -->
			<!-- ============================================================== -->

		</div>
		<script src="http://cdn.xtcrm.com/cdn//v7/fm/ub/js/jquery.core.js"></script>
		<script src="http://cdn.xtcrm.com/cdn//v7/fm/ub/js/jquery.app.js"></script>
	</body>

</html>